<template>
  <el-row class="fan-container">
    <el-row>
      <el-col :span="21">
        <h1 class="fan-title">{{ $t('pageFanSpeed.chart.fanSpeed') }}</h1>
      </el-col>
      <el-col :span="3">
        <router-link class="view-more-link" to="/system-management/fan-speed">
          {{ $t('pageOverview.viewMore') }}
        </router-link>
      </el-col>
    </el-row>
    <el-row class="fan-body">
      <el-col>
        <dl>
          <dd>
            <fan-speed-chart :fan-speeds="fanSpeeds" />
          </dd>
        </dl>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import FanSpeedChart from '@/views/SystemManagement/FanSpeed/FanSpeedChart';
import { mapGetters } from 'vuex';

export default {
  name: 'Fan',
  components: {
    FanSpeedChart,
  },
  mixins: [DataFormatterMixin],
  computed: {
    ...mapGetters('fanSpeed', ['fanSpeeds', 'pwmValues', 'zoneInfos']),
  },
  created() {
    this.$store.dispatch('fanSpeed/getFanAllData');
  },
};
</script>

<style lang="scss" scoped>
.fan-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 0px;
  }
}
.fan-container > .el-row:last-child {
  padding-bottom: 20px;
}
.fan-title {
  font-size: 22px;
}
.view-more-link {
  color: #409eff;
  text-decoration: none;
}
</style>
